<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span> {{ popData.title }} </span>
    </div>
    <el-scrollbar
      wrap-style="overflow-x:hidden;"
      class="dialogScrollbar"
    >
      <el-tree
        v-loading="loading"
        element-loading-text="拼命加载中"
        class="dialogTree"
        show-checkbox
        :data="dataList"
        :props="popData.dialogProps"
        node-key="id"
        :default-checked-keys="checked"
        ref="dataTree"
      />
    </el-scrollbar>
    <el-button
      type="primary"
      size="mini"
      class="dialogBtn"
      @click="saveRoleData"
    >
      保存
    </el-button>
  </el-card>
</template>
<script>
export default {
  props: ['popData'],
  data() {
    return {
      name: 'roleDialog',
      dialogProps: {},
      checked: [],
      dataList: [],
      loading: true
    }
  },
  created() {
    this.loading = false
    const resp = this.popData.resp
    this.dataList = resp.data.tree
    this.checked = resp.data.checked
  },
  methods: {
    /**
     * 保存数据
     */
    saveRoleData() {
      const checkedKeys = this.$refs.dataTree.getCheckedKeys()
      this.popData.saveBatch(this.popData.id, checkedKeys)
    }
  }
}
</script>
<style>
  @import "../../styles/dialogForm.scss";
  .dialogBtn{
    margin-top: 30px;
  }
  .dialogTree{
    margin-bottom: 10px;
    height: 380px;
  }
  .dialogScrollbar{
    padding: 15px;
  }
</style>
